<template>
  <div class="app-container calendar-list-container">
    <el-card>
      <el-select class="filter-item" style="width: 200px;" placeholder="请选择审核状态" v-model="listQuery.value">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-input clearable class="filter-item" style="width: 200px" placeholder="代理归属" v-model="listQuery.name"></el-input>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFind">查找</el-button>
    </el-card>
    <el-card>
      <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row @selection-change="selsChange">
        <el-table-column align="center" min-width="100px" label="机构id" prop="id">
        </el-table-column>
        <el-table-column align="center" min-width="100px" label="机构名称" prop="name">
        </el-table-column>
        <el-table-column align="center" min-width="100px" label="审核状态" prop="checkStatus" :formatter="formatRoleType">
        </el-table-column>
        <el-table-column align="center" min-width="100px" label="代理归属名称" prop="pname">
        </el-table-column>
        <el-table-column align="center" min-width="100px" label="代理联系方式" prop="ptelephone">
        </el-table-column>
        <el-table-column align="center" min-width="100px" label="审批记录" prop="checkWord">
        </el-table-column>
        <el-table-column align="center" min-width="80px" label="机构等级" prop="level">
          <template slot-scope="scope">
            <el-tag>{{LList[scope.row.level]}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleAuditing(scope.row)" v-if="scope.row.checkStatus == 1">审核</el-button>
            <el-button type="primary" size="mini" @click="subAccount(scope.row)" v-if="scope.row.checkStatus == 2 && scope.row.affiliation != undefined && scope.row.plevel >=3 ">分账</el-button>
            <el-button type="primary" size="mini" @click="creatMechUser(scope.row)" v-if="scope.row.checkStatus == 2">人员</el-button>
            <el-tag type="danger" v-if="scope.row.checkStatus == 3">未通过</el-tag>
            <el-tag type="primary" size="mini" v-if="scope.row.checkStatus == 4">已分账</el-tag>
            <el-tag type="primary" v-if="scope.row.checkStatus == 5">已退款</el-tag>
            <el-tag type="danger" v-if="scope.row.checkStatus == 6">退款失败</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>

      <el-dialog :visible.sync="dialogImageVisible">
        <img :src="ShowImage" style="width:100%;height:100%">
      </el-dialog>

      <!-- 弹出审核框 -->
      <el-dialog title="机构详情" :visible.sync="dialogFormVisible">
        <el-form ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="150px" style='width: 400px; margin-left:100px;'>
          <el-form-item label="机构名称:" prop="name">
            <el-tag v-text="dataForm.name"></el-tag>
          </el-form-item>
          <el-form-item label="机构分类:" prop="mcategoryId">
            <el-tag v-text="cList[dataForm.mcategoryId]"></el-tag>
          </el-form-item>
          <el-form-item label="机构等级:">
            <el-tag v-text="LList[dataForm.level]"></el-tag>
          </el-form-item>
          <el-form-item label="法人:" prop="legalPerson">
            <el-tag v-text="dataForm.legalPerson"></el-tag>
          </el-form-item>
          <el-form-item label="详细地址:" prop="allAdderss">
            <el-tag v-text="dataForm.allAdderss"></el-tag>
          </el-form-item>
          <el-form-item label="联系电话:" prop="telephone">
            <el-tag v-text="dataForm.telephone"></el-tag>
          </el-form-item>
          <el-form-item label="资质照片">
            <img class="gallery" v-for="pic in dataForm.certification" :key="pic" :src="pic" @click="getImage(pic)" />
          </el-form-item>
        </el-form>
        <div class="reason">
          <el-input v-model="dataForm.checkWord" type="textarea" style="width:500px;" :rows="2" placeholder="不通过需要的原因">
          </el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="checkSuccess">通过</el-button>
          <el-button type="danger" size="mini" @click="checkDefault">不通过</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { mechanismCheckSuccess, mechanismCheckDefault, subAccount, showMechanim } from '@/api/mechanism'
import { listQualification } from '@/api/qualificationCheck'
import { listAllMCategory, listMechanisLevel } from '@/api/mechanismCategory'

const statusMap = {
  1: '审核中',
  2: '已通过',
  3: '未通过'
}

export default {
  name: 'Auditing',
  data() {
    return {
      list: null,
      total: undefined,
      listLoading: true,
      dialogFormVisible: false,
      checkAllVisible: false,
      statusMap,
      num: '',
      options: [
        {
          value: '1',
          label: '审核中'
        },
        {
          value: '2',
          label: '已通过'
        },
        {
          value: '3',
          label: '未通过'
        },
        {
          value: '4',
          label: '已分账'
        },
        {
          value: '5',
          label: '已退款'
        },
        {
          value: '6',
          label: '退款失败'
        }
      ],
      sels: [],
      listQuery: {
        page: 1,
        limit: 10,
        value: '1',
        name: '',
        sort: '',
        order: 'desc'
      },
      checkForm: {
        type: undefined,
        ids: undefined,
        goodsIds: undefined,
        reason: undefined
      },
      dataForm: {
        id: undefined,
        name: undefined,
        nickName: undefined,
        mechanismType: undefined,
        address: undefined,
        allAdderss: undefined,
        legalPerson: undefined,
        telephone: undefined,
        qualifications: [],
        integralAmountAll: 1000000,
        provinceId: undefined,
        cityId: undefined,
        areaId: undefined,
        street: undefined,
        username: undefined,
        password: undefined,
        fullName: undefined,
        mechanismId: undefined,
        startTime: undefined,
        endTime: undefined,
        mcategoryId: undefined,
        level: undefined,
        affiliation: undefined,
        checkWord: undefined,
        certification: []
      },
      ids: {
        checkId: undefined,
        goodsId: undefined,
        reason: undefined
      },
      mLevelList: [],
      categorylist: [],
      cList: {},
      LList: {},
      ShowImage: undefined,
      dialogImageVisible: false
    }
  },
  created() {
    this.getList()
    this.getmlevel()
    this.getmcategory()
  },
  methods: {
    filters: {
      orderStatusFilter(status) {
        return statusMap[status]
      }
    },
    selsChange(sels) {
      this.sels = sels
    },
    resetCheck() {
      this.checkForm = {
        type: undefined,
        ids: undefined,
        goodsIds: undefined,
        reason: undefined
      }
    },
    subAccount(row) {
      subAccount({ id: row.id })
        .then(response => {
          this.getList()
          this.$notify({
            title: '成功',
            message: response.data.data,
            type: 'success',
            duration: 2000
          })
        })
        .catch(response => {
          this.$message({
            title: '提示',
            message: response.data.errmsg,
            type: 'warning'
          })
        })
    },
    checkSuccess() {
      console.log(this.dataForm.id)
      mechanismCheckSuccess({ id: this.dataForm.id }).then(() => {
        this.dialogFormVisible = false
        this.$notify({
          title: '成功',
          message: '审核成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    },
    getImage(e) {
      this.ShowImage = e
      this.dialogImageVisible = true
    },
    formatRoleType: function(row, column) {
      return row.checkStatus === 1
        ? '审核中'
        : row.checkStatus === 2
          ? '已通过'
          : row.checkStatus === 3
            ? '未通过'
            : row.checkStatus === 4 ? '已分账' : row.checkStatus === 5 ? '已退款' : row.checkStatus === 6
    },
    handleFind() {
      this.getList()
    },
    getmlevel() {
      listMechanisLevel()
        .then(response => {
          this.mLevelList = response.data.data.brandList
          for (let i = 0; i < this.mLevelList.length; i++) {
            this.LList[this.mLevelList[i].value] = this.mLevelList[i].label
          }
        })
        .catch(() => {
          this.mlevel = []
        })
    },
    getmcategory() {
      listAllMCategory()
        .then(response => {
          this.categorylist = response.data.data.brandList
          for (let i = 0; i < this.categorylist.length; i++) {
            this.cList[this.categorylist[i].value] = this.categorylist[i].label
          }
        })
        .catch(() => {
          this.mcategory = []
        })
    },
    getList() {
      this.listLoading = true
      listQualification(this.listQuery)
        .then(response => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    init() {
      this.listQuery.page = 1
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },

    handleAuditing(row) {
      this.dataForm = Object.assign({}, row)
      showMechanim(this.dataForm).then(response => {
        this.dataForm = response.data.data.listMechanism
      })
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    creatMechUser(row) {
      this.$router.push({ path: '/mechanism/mechanismUser', query: { mechanismId: row.id }})
    },
    checkDefault() {
      if (this.dataForm.checkWord === undefined || this.dataForm.checkWord.replace(/^\s+|\s+$/g, '') === '') {
        this.$alert('如果选择不通过则必须填写原因！', {
          confirmButtonText: '确定',
          type: 'warning'
        })
        return false
      }
      mechanismCheckDefault({ id: this.dataForm.id, checkWord: this.dataForm.checkWord }).then(() => {
        this.dialogFormVisible = false
        this.$notify({
          title: '成功',
          message: '审核成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    }
  }
}
</script>
<style>
.alipay {
  width: 200rect;
  height: 100rect;
  background-color: red;
}
.rra {
  margin-bottom: 100px;
}
.abimg {
  margin-bottom: -15px;
  height: 40px;
}
.reason {
  width: 300px;
  text-align: center;
  margin-left: 52px;
}
.choice {
  margin-top: 20px;
}
.gallery {
  width: 80px;
  margin-right: 10px;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>